<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type">
		<title><{$smarty.const._LB_CULTURAL_MOSAIC}></title>
		<script src="js/jquery-latest.js"></script>
		<script src="js/jquery.form.js"></script>		
		<script src="js/jquery.json-2.3.min.js"></script>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<link href="css/base.css" type="text/css" rel="stylesheet" />
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="css/fix_ie.css" />
		<![endif]-->
		
	</head>
	<body>
		<!--[if IE]>

		<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>

		<div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>

		<div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>

		  <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>

		  <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>

			<div style='font-size: 14px; font-weight: bold; margin-top: 12px;'><?php echo '_LB_IE6_ALERT_1'; ?></div>

			<div style='font-size: 12px; margin-top: 6px; line-height: 12px;'><?php echo '_LB_IE6_ALERT_2'; ?></div>

		  </div>

		  <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>

		  <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div>

		  <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>

		</div>

		</div>

		<![endif]-->
		<div class="container">
			<div class="top-bar">
				<div id="game-logo" ><img src="images/<{$smarty.const._LB_CULTURAL_MOSAIC_LOGO}>" alt="<{$smarty.const._LB_CULTURAL_MOSAIC}>" /></div>
				<div id="login-box" class="login-box">
					<{include file='loginbox.tpl'}>
				</div>
			</div>
			<div class="main">
				<div class="box">
					<h3 id="title"><{$smarty.const._LB_CULTURAL_MOSAIC}></h3>
					<div id="message" style="text-align:center;vertical-align:middle;"></div>
					<div id="game-content">	
						<div id="game-crossword-frame" style="background:url(images/cutural-mosaic-screen-bg.png) top left no-repeat"><{$crossword_frame}></div>
						<div id="game-crossword-question">
							<strong style="color: #197b30">Across:</strong>
							<div id="game-crossword-rows" class="scrollable-box">
								<{foreach from=$rows item=row key=key}>
									<div name="cell_<{$row.x-1}>_<{$row.y-1}>_<{$row.axis}>" class="question-hint-row" id="question_word_<{$key}>_<{$row.axis}>"><{$key}>. <{$row.question}></div>
								<{/foreach}>									
							</div>
							<strong style="color: #197b30">Down:</strong>
							<div id="game-crossword-columns" class="scrollable-box">
								<{foreach from=$cols item=col key=key}>
									<div name="cell_<{$col.x-1}>_<{$col.y-1}>_<{$col.axis}>" class="question-hint-row" id="question_word_<{$key}>_<{$row.axis}>"><{$key}>. <{$col.question}></div>
								<{/foreach}>
							</div>
						</div>
						<div id="game-result">
							<table id="game-control" border="0" >
								<tr>
									<td><a href="javascript:void(0);" id="start-button" class="small-button green-button" ><{$smarty.const._LB_START}></a></td>
									<td></td>
									<td><a href="javascript:void(0);" id="reload-button" class="small-button grey-button" ><{$smarty.const._LB_RELOAD}></div></td>
								</tr>
								<tr>
									<td></td>
									<td><a href="javascript:void(0);" id="accept-button"><img src="images/accept-button.png" alt="" /></a></td>
									<td></td>
								</tr>
							</table>
						</div>
					</div>
					<script type="text/javascript">
							$(document).ready(function(){
								var arrDir = jQuery.parseJSON('<{$arrDir}>');
								$("#start-button").click(function (){
									// Enable input
									$(".oyCellInput").each(function(){
										$(this).enable(true);
									});
									
									$(".question-hint-row").each(function(){
										$(this).click(function(){
											$(".question-hint-row").removeClass("question-hint-row-selected"); //Reset old selected word.
											$(this).addClass("question-hint-row-selected");
											var pos = $(this).attr('name').split("_");
											window.currentAxis = parseInt(pos[3]);
											fillColor(pos);
										});
									});
									
									window.currentAxis = 1;
									window.currentNo = 1;
									$('input[name=cell_2_6]').click();
									
									$(this).attr("class", "small-button grey-button");
									$("#reload-button").attr("class", "small-button green-button");
									$("#start-button").attr("disabled","disabled");
								});
								$("#reload-button").click(function (){
									$(this).attr("class", "small-button grey-button");
									$("#start-button").attr("class", "small-button green-button");
									$(".oyCellInput").each(function(){
										$(this).val("");
										$(this).attr("disabled", "disabled");
										$(this).parent().css("background-color","#FFFFFF");
									});
									$(".question-hint-row").each(function(){
										$(this).removeClass("question-hint-row-selected");
									});
									$("#start-button").removeAttr("disabled");
								});
								$("#accept-button").click(function (){
									var arrAnswer = new Object();
									for(i in arrDir)
									{
										arrAnswer[i] = "";
										if(arrDir[i].axis == 1) // In row
										{
											var pos = arrDir[i].x;
											var inputID	= "";
											do
											{
												inputID = "input[name=" + 'cell_' + pos + '_' + arrDir[i].y+"]";
												if(typeof($(inputID).val()) !== 'undefined')
													arrAnswer[i] += $(inputID).val();
												pos++;
											}
											while(typeof($(inputID).val()) !== 'undefined');
										}
										else // In column
										{
											var pos = arrDir[i].y;
											var inputID	= "";
											do
											{
												inputID = "input[name=" + 'cell_' + arrDir[i].x + '_' + pos + "]";
												if(typeof($(inputID).val()) !== 'undefined')
													arrAnswer[i] += $(inputID).val();
												pos++;
											}
											while(typeof($(inputID).val()) !== 'undefined');
										}
									}
									string_request = "culturalmosaic.php?act=<{$smarty.const.END}>";
									$.post(string_request, arrAnswer,function(data) {
										$("#title").html(data.title);
										$("#message").html(data.message);
										$("#game-content").html("");
										fillTopPlayers(data);
									},"json");
								});
								$(".oyCellInput").each(function(){
									this.disabled = true;
									$(this).click(function(){
										var pos = $(this).attr('name').split("_");
										fillColor(pos);
										markQuestion();
										$(this).parent().css("background-color","#6699FF");
									});
								});

							});
							
						function loadTopPlayers()
						{
							$.getJSON("gettopplayers.php?gametype=2",
							function(data) {
								fillTopPlayers(data);
							});
						}
						
						function fillTopPlayers(data)
						{
							if(data.players)
							{
								var table	= $("#top-players").children("table");
								table.html("");
								$.each(data.players, function(index){
									var tr		= $("<tr/>");
									var td_id	= $("<td/>").attr("class", "id");
									var td_name = $("<td/>").attr("class", "name");
									var td_mark = $("<td/>").attr("class", "mark");
									td_id.text(data.players[index].id + ". ");
									td_id.appendTo(tr);
									td_name.text(data.players[index].name);
									td_name.appendTo(tr);
									td_mark.text(data.players[index].date);
									td_mark.appendTo(tr);
									tr.appendTo(table);
								});
							}
						}
						
						function setActiveInput(x, y, axis)
						{
							var inputID = "input[name=" + 'cell_' + x + '_' + y + "]";
							$(inputID).parent().css("background-color","#FFFFCC");
							$(inputID).focus();
							window.currentAxis = axis;
						}
						
						function fillColor(pos)
						{
							$(".oyCellInput").parent().css("background-color","#FFFFFF"); //Reset old selected word.
							var previousX = parseInt(pos[1])-1;
							var previousY = parseInt(pos[2])-1;
							var nextX = parseInt(pos[1])+1;
							var nextY = parseInt(pos[2])+1;
							
							var top		= "input[name=" + 'cell_' + pos[1] + '_' + previousY + "]"; // X - Y - AXIS
							var bottom	= "input[name=" + 'cell_' + pos[1] + '_' + nextY + "]"; // X - Y - AXIS
							var left	= "input[name=" + 'cell_' + previousX + '_' + pos[2] + "]"; // X - Y - AXIS
							var right	= "input[name=" + 'cell_' + nextX + '_' + pos[2] + "]"; // X - Y - AXIS
							var current	= "input[name=" + 'cell_' + pos[1] + '_' + pos[2] + "]"; // X - Y - AXIS
							if(window.currentAxis == 1)
							{
								if(typeof($(left).val()) === 'undefined' && typeof($(right).val()) === 'undefined')
								{
									window.currentAxis == 2;
									fillCol(current, pos[1], pos[2]);
									
								}
								else
								{
									fillRow(current, pos[1], pos[2]);
								}
							}
							else
							{
								if(typeof($(top).val()) === 'undefined' && typeof($(bottom).val()) === 'undefined')
								{
									window.currentAxis == 1;
									fillRow(current, pos[1], pos[2]);
								}
								else
								{
									fillCol(current, pos[1], pos[2]);
								}
							}
						}
						
						function fillRow(current, x, y)
						{
							var step = parseInt(x);
							while(typeof($(current).val()) !== 'undefined') // Fill right
							{
								step--;
								current = "input[name=" + 'cell_' + step + '_' + y + "]";
							}
							
							// Process mark question
							var question_name = "td[name=" + 'cell_' + step + '_' + y + "]";
							var pos = $(question_name).attr('id').split("_");
							if(pos[1].search("/") >= 0)
							{
								var question_number = pos[1].split("/");
								window.currentNo = parseInt(question_number[1]);
							}
							else
							{
								window.currentNo = parseInt(pos[1]);
							}
							//---------------------------------------
							step++;
							current = "input[name=" + 'cell_' + step + '_' + y + "]";
							
							while(typeof($(current).val()) !== 'undefined')
							{
								$(current).parent().css("background-color","#FFFFCC");
								step++;
								current	= "input[name=" + 'cell_' + step + '_' + y + "]";
							}
						}
						
						function fillCol(current, x, y)
						{
							var step = parseInt(y);
							while(typeof($(current).val()) !== 'undefined') // Fill right
							{
								step--;
								current = "input[name=" + 'cell_' + x + '_' + step + "]";
							}
							
							// Process mark question
							var question_name = "td[name=" + 'cell_' + x + '_' + step + "]";
							var pos = $(question_name).attr('id').split("_");
							if(pos[1].search("/") >= 0)
							{
								var question_number = pos[1].split("/");
								window.currentNo = parseInt(question_number[0]);
							}
							else
							{
								window.currentNo = parseInt(pos[1]);
							}
							//---------------------------------------
							step++;
							current = "input[name=" + 'cell_' + x + '_' + step + "]";
							while(typeof($(current).val()) !== 'undefined')
							{
								$(current).parent().css("background-color","#FFFFCC");
								step++;
								current = "input[name=" + 'cell_' + x + '_' + step + "]";
							}
						}
						
						function markQuestion()
						{
							for(var i=1;i<=10;i++)
							{
								$("#question_word_"+i+"_"+window.currentAxis).removeClass("question-hint-row-selected");
							}
							$("#question_word_"+window.currentNo+"_" + window.currentAxis).addClass("question-hint-row-selected");
						}
						</script>
					<div class="clear"></div>
				</div>
				<div class="box game-logo-list">
					<ul>
						<li><a href="getthepicture.php"><img src="images/select-getthepicture.png" alt="<{$smarty.const._LB_GET_THE_PICTURE}>" /></a></li>
						<li><a href="culturalmosaic.php"><img src="images/select-culturalmosaic.png" alt="<{$smarty.const._LB_CULTURAL_MOSAIC}>" /></a></li>
						<li><a href="tettettet.php"><img src="images/select-tettettet.png" alt="<{$smarty.const._LB_TET_TET_TET}>" /></a></li>
						<li><a href="http://www.tuoitrenews.vn/cmlink/tuoitrenews/game/who-s-who-writing-contest-1.58636"><img src="images/select-who.png" alt="<{$smarty.const._LB_CONTEST_WHO}>" /></a></li>
					</ul>
				</div>
			</div>
			<div class="side">
				<div class="adv">
					<a href="http://www.eximbank.com.vn/vn/" target="_blank" ><img src="images/EXIMBANK.jpg" /></a>
				</div>

				<div class="box metal">
					<h3><{$smarty.const._LB_CONTEST_NEWS}></h3>
					<div class="content">
						<ul style="list-style:none;text-align:left;">
							<li><a style="font-size:16px;" href="http://www.tuoitrenews.vn/cmlink/tuoitrenews/game/tuoitrenews-launches-get-the-picture-contest-1.58715" target="_blank"><{$smarty.const._LB_CONTEST_RULES}></a></li>
							<li><a style="font-size:16px;" href="http://www.tuoitrenews.vn/cmlink/tuoitrenews/game/who-s-who-writing-contest-1.58636" target="_blank"><{$smarty.const._LB_CONTEST_WHO}></a></li>
							<li><a style="font-size:16px;" href="http://tuoitrenews.vn/cmlink/tuoitrenews/lifestyle/tuoi-tre-initiates-traditional-tet-program-1.57815" target="_blank"><{$smarty.const._LB_ONLINE_TET}></a></li>
						</ul>
					</div>
				</div>

				<div class="box pink">
					<{include file='latest_players.tpl'}>
				</div>

				<div class="clear"></div>
			</div>
			<div class="footer">
				<a href="http://www.eximbank.com.vn/vn/" target="_blank" ><img src="images/Eximbank-Ad.gif" width="934" height="123" /></a>
			</div>
			<div class="clear"></div>
		</div>
	</body>
</html>
